In Svelte, named slots allow you to pass different pieces of content from a parent component into specific placeholders within a child component. This is useful for building flexible and reusable UI layouts, such as cards, modals, or layouts with headers and footers.
To create a named slot, add the name attribute to the <slot> element inside the child component. This tells Svelte where specific named content should be rendered.
When using the component, you wrap the content in a <div slot="name"> or directly set the slot attribute on the element to target the correct named slot.
You can also include fallback content inside named slots. This fallback will only be shown if the parent does not provide content for that specific slot.
Named slots use the
nameattribute to distinguish between different slots.Parent components must use the
slotattribute to specify where content should go.If no content is passed for a named slot, fallback content inside the child component will be displayed.
You can mix named slots and a default slot within the same component.